<!--用户管理-->
<template>
  <div class="page-container">
    <ex_super_table_page v-bind="option" ref="superTablePage">
    </ex_super_table_page>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="880px" height="200px"
               :close-on-click-modal="false">
      <el-form ref="formEl" :model="formValue" :rules="rules" label-width="120px" class="common-form-panel-div"
               style="padding: 0px 10px;">
        <ex_header_spiler :title="$tt('label_base_info')"></ex_header_spiler>
        <el-row>
          <el-col>
            <el-form-item label="所属货贷企业" prop="companyId">
              {{ $loginUser ? $loginUser.companyName: '' }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item :label="$tt('label_login_account')">
              <el-input v-model="formValue.loginId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item :label="$tt('label_name')">
              <el-input v-model="formValue.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item :label="$tt('label_phone_number')">
              <el-input v-model="formValue.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="label_mailbox">
              <el-input v-model="formValue.email"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <ex_header_spiler title="第三方平台信息"></ex_header_spiler>

        <el-row>
          <el-col>
            <el-form-item  :label="$tt('label_srm_api_service_platform_code')" >
              <el-input v-model="formValue.platformCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item :label="$tt('label_srm_api_service_platform_name')">
              <el-input v-model="formValue.platformName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>

  let moduleName = "开放平台应用管理"

  export default {

    title: moduleName,
    components: {},

    data() {

      let _this = this

      return {

        formModel: 'insert/update',

        userTypeArr: [{id: 'ADMIN', name: '管理员'}, {id: 'OPERATOR', name: '操作员'}],
        roleSystemArr: [{id: 'WMS', name: 'WMS'}, {id: 'TMS', name: 'TMS 运输系统'}, {id: 'OMS', name: '业务后台系统'}],
        roleSystemMap: {},

        dialogFormVisible: false,
        dialogTitle: '',
        formValue: {},
        rules: {
          companyName: [
            {required: true, message: this.$tt('tip_can_no_empty'),  trigger: 'blur'},
            {min: 3, max: 32, message: this.$tt('tip_length_in_min_max',{min:3,max:32}), trigger: 'blur'}
          ],
          companyShortCode: [
            {required: true, message: this.$tt('tip_can_no_empty'),  trigger: 'blur'},
            {min: 3, max: 16, message: this.$tt('tip_length_in_min_max',{min:3,max:16}), trigger: 'blur'}
          ]
        }


      };
    },


    watch: {
      'formValue.companyId'(val, old) {

      }
    },

    created() {

      let _this = this

      _this.roleSystemMap = {}
      _this.roleSystemArr.forEach(e => {
        _this.roleSystemMap[e.id] = e.name
      })

      _this.option = {
        search: {
          model: [
            {label: "label_keyword", key: "keyword",},
            {
              label: "label_status", key: "status", type: 'select',
              items: [{label: '正常', value: 'NORMAL'}, {label: '禁用', value: 'FORBIDDEN'}]
            }
          ],
        },
        action: [
          {
            label: '新增应用', attrs: {icon: "el-icon-plus"}, click: () => {
              this.$router.push({
                path: '/page/admin/open_app_edit'
              })
            }
          },
        ],

        table: {
          url: "/open-api/open/OpenAppRpc/queryAllApp.json",
          attrs: {
            'cell-style': ({row, column, rowIndex, columnIndex}) => {
              if (column.property == 'status') {
                return {color: row.status == 'NORMAL' ? this.$globalCss.successColor : this.$globalCss.infoColor}
              }
            }
          },
          model: [
            {key: 'appName', label: '应用名', align: 'left'},
            {
              key: 'platformCode', label: '所属平台', align: 'left',
              attrs: {
                formatter: (r, c, v, i) => {
                  return '['+r.platformCode+'] ' + r.platformName
                }
              }
            },
            {
              key: 'status', label: 'label_status',
              width: 120,
              attrs: {
                formatter: (r, c, v, i) => {
                  return this.$enumShow(v, 'IsAvailableStatusEnum')
                }
              }
            },

            {key: 'creator', label: 'label_create_user', align: 'left', width: 120},
            {key: 'modifier', label: '最后更新', align: 'left', width: 120},
            {
              key: 'gmtCreate', label: 'label_create_time', attrs: {
                formatter: (r, c, v, i) => {
                  return this.$dateFormat(v)
                }
              }
            },
            {
              key: 'gmtModify', label: '最后更新时间', attrs: {
                formatter: (r, c, v, i) => {
                  return this.$dateFormat(v)
                }
              }
            },

            {
              type: 'operate', width: 220,
              operate: [
                {
                  label: '禁用',
                  type: "confirm-button",
                  message: "确定要禁用吗？禁用后该客户将不能进行下单",
                  url: '/open-api/open/OpenAppRpc/disable.json',
                  if: (row) => {
                    return row.status == 'ENABLE'
                  },
                  params: (v) => {
                    return {id: v.id}
                  },
                  done: ['reload', 'tip'],
                },
                {
                  label: '启用',
                  type: "confirm-button",
                  message: "确定要启用吗？",
                  url: '/open-api/open/OpenAppRpc/enable.json',
                  if: (row) => {
                    return row.status != 'ENABLE'
                  },
                  params: (v) => {
                    return {id: v.id}
                  },
                  done: ['reload', 'tip']
                },

                {
                  label: "代码配置", click: (row) => {
                    this.$router.push({
                      path: '/page/admin/open_app_code',
                      query: {id: row.id}
                    })
                  }
                },

                {
                  label: "label_edit", click: (row) => {
                    this.$router.push({
                      path: '/page/admin/open_app_edit',
                      query: {id: row.id}
                    })
                  }
                }

              ],
            }
          ]
        }
      }


    },

    props: {

      // admin  compnay
      'roleScope': {
        type: String,
        defafult: ''
      },

      // WMS OMS TMS
      'roleSystem': {
        type: String,
        defafult: ''
      }

    },

    destroyed() {

    },

    methods: {



      submitForm() {

        let _this = this

        _this.$refs['formEl'].validate((valid) => {
          if (valid) {

            _this.$ajax({
              url: '/ums-api/user/AgentOpenUserRpc/saveUpdate.json',
              type: 'json',
              data: _this.formValue,
              success: (responseData) => {
                this.$message({
                  showClose: true,
                  message: '提交成功',
                  type: 'success'
                })
                _this.$refs['superTablePage'].reload()
                _this.dialogFormVisible = false
              }
            });

          } else {
            return false;
          }

        });

      }


    }
  };

</script>
<style>
  .small-btn span {
    font-size: 14px;
  }

  .small-btn .el-button--small span {
    font-size: 14px;
  }
</style>
